<template>
    <div class="user_dialog_shortcut">
        <div class="dialog_shortcut">
            <div class="userdialog_header">
                <div class="ud_header_time">本周（{{ getBeijingWeekDates() }}）</div>
                <div style="cursor: pointer" @click="show = false">
                    <img src="@/assets/board/del-default.png" style="width: 18px; height: 18px" alt="" />
                </div>
            </div>
            <div class="userdialog_content">
                <div class="ud_content_search">
                    <el-input v-model="searchkey" style="width: 160px" />
                    <el-button type="primary" style="margin-left: 12px" @click="getusersdata()">查询</el-button>
                </div>
                <div class="ud_content_table">
                    <el-table :data="users" style="width: 100%; margin-bottom: 20px" height="calc( 100vh - 422px)"
                        row-key="id" default-expand-all>
                        <el-table-column width="30" align="center">
                            <template #default="scope">
                                <div class="ud_content_checkall">
                                    <template v-if="shortcutstate.userdialog.type == 'radio'">
                                        <el-radio-group v-model="shortcutstate.userdialog.radiouser">
                                            <el-radio :value="scope.row.value" />
                                        </el-radio-group>
                                    </template>

                                    <template v-if="shortcutstate.userdialog.type == 'checked'">
                                        <el-checkbox-group v-model="shortcutstate.userdialog.radiouser">
                                            <el-checkbox :value="scope.row.value" />
                                        </el-checkbox-group>
                                    </template>

                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="label" label="账号">
                            <template #default="scope">
                                <div style="display: flex; flex-direction: column">
                                    <el-popover placement="right" :width="300" popper-class="popover_aumot"
                                        :show-after="200" :hide-after="100" trigger="hover">
                                        <template #reference>
                                            <div style="
                          cursor: pointer;
                          cursor: pointer;
                          border-bottom: 1px solid #ff7900;
                          width: fit-content;
                        ">
                                                {{ scope.row.label }}
                                            </div>
                                        </template>
                                        <div class="account_amout">
                                            <div class="title">最近50个订单本账号与其他账号相似度如下：</div>
                                            <div class="content">
                                                <div class="item" style="background: #ebebeb">
                                                    <div class="name"
                                                        style="font-weight: bold; font-size: 12px; color: #8a8a8a">
                                                        账号名
                                                    </div>
                                                    <div class="num"
                                                        style="font-weight: bold; font-size: 12px; color: #8a8a8a">
                                                        相似度
                                                    </div>
                                                </div>
                                                <el-scrollbar max-height="350px">
                                                    <template v-if="scope.row.user_value.similarity.length > 0">
                                                        <div class="item"
                                                            v-for="(item, index) in scope.row.user_value.similarity"
                                                            :key="index" :style="index != scope.row.user_value.similarity.length - 1
                                                                ? 'border-bottom: 1px solid #ebebeb;'
                                                                : ''
                                                                ">
                                                            <div class="name">{{ item.member }}</div>
                                                            <div class="num"
                                                                :style="item.simil_ratio >= 20 ? 'color: #ff5f58;' : 'color: #96e8a9;'">
                                                                {{ item.simil_ratio }}%
                                                            </div>
                                                        </div>
                                                    </template>

                                                    <template v-else>
                                                        <!-- <el-empty description="description" :image-size="30" /> -->
                                                        <div class="empty">暂无数据</div>
                                                    </template>
                                                </el-scrollbar>
                                            </div>
                                        </div>
                                    </el-popover>
                                    <div style="color: #02a66e; font-size: 12px">{{ scope.row.user_value.now_amount }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="label" label="来源" width="60">
                            <template #default="scope">
                                <div style="display: flex; flex-direction: column">
                                    <div style="font-size: 12px">{{ scope.row.user_value.fees_type == 'free' ? '共享' :
                                        '独享' }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column width="90" prop="user_value.member_profit" label="最高"
                            :sortable="customSortmemberprofit" align="center">
                            <template #default="scope">
                                <div :style="scope.row.member_profit >= 0 ? 'color: #02a66e;' : 'color: #f83e3e;'"
                                    style="font-size: 14px; font-weight: bold">
                                    <!-- {{ scope.row.user_value.member_profit }} -->
                                    {{ getnum(scope.row.user_value.percent, scope.row.user_value.user_balance) }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column width="100" prop="user_value.valid_amount" label="有效金额"
                            :sortable="customSortvalidamount" align="center">
                            <template #default="scope">
                                <div style="font-size: 14px; font-weight: bold">
                                    {{ scope.row.user_value.now_amount }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column width="50" label="输赢" align="center">
                            <template #default="scope">
                                <div :style="scope.row.member_profit >= 0 ? 'color: #02a66e;' : 'color: #f83e3e;'">
                                    {{ scope.row.user_value.member_profit >= 0 ? '赢' : '输' }}
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div style="width: 100%; height: 48px">
                <el-button type="primary" class="hovepcvicecolor"
                    style="width: 100%; height: 48px; font-size: 16px; font-weight: 600; font-family: PingFangSC"
                    @click="userSubmit">确定</el-button>
            </div>
        </div>


    </div>
</template>

<script setup>
const { shortcutstore, shortcutstate } = inject('shortcutSell')

import { ElMessage } from 'element-plus'
const show = defineModel({ type: Boolean })

const firstRadio = ref() //users数据中第一个选项的value值

const searchkey = ref('')
const users = ref([])

const customSortmemberprofit = (a, b) => {
    return a.user_value.member_profit - b.user_value.member_profit
}
const customSortvalidamount = (a, b) => {
    return a.user_value.valid_amount - b.user_value.valid_amount
}

const getBeijingWeekDates = () => {
    const now = new Date()
    const beijingOffset = 8 * 60 // 北京时区偏移量（分钟）
    const utcDate = new Date(now.getTime() + (now.getTimezoneOffset() + beijingOffset) * 60 * 1000)

    // 获取当前日期的星期几（0=星期日, 1=星期一,..., 6=星期六）
    const dayOfWeek = utcDate.getUTCDay()

    // 计算本周一的日期
    const mondayThisWeek = new Date(utcDate)
    mondayThisWeek.setUTCDate(utcDate.getUTCDate() - (dayOfWeek - 1))
    mondayThisWeek.setUTCHours(12, 0, 0, 0) // 设置为12:00:00

    // 计算下周一的日期
    const mondayNextWeek = new Date(mondayThisWeek)
    mondayNextWeek.setUTCDate(mondayThisWeek.getUTCDate() + 7)

    // 生成格式化日期字符串
    const formatDate = date => {
        const month = date.getUTCMonth() + 1 // 月份从0开始
        const day = date.getUTCDate()
        return `${month}/${day}`
    }

    // 判断今天是否是周一并且是否超过12点
    if (dayOfWeek == 0 || (dayOfWeek === 1 && utcDate.getHours() < 12)) {
        // 如果今天是周一且时间在12点之前，返回上周的日期
        mondayThisWeek.setUTCDate(mondayThisWeek.getUTCDate() - 7)
        mondayNextWeek.setUTCDate(mondayNextWeek.getUTCDate() - 7)
    }

    // 返回结果
    return `${formatDate(mondayThisWeek)} 12:00:00-${formatDate(mondayNextWeek)} 12:00:00`
}



const userSubmit = () => {
    if (shortcutstate.userdialog.radiouser != '') {
        show.value = false
        shortcutstate.formData[shortcutstate.userdialog.field] = shortcutstate.userdialog.radiouser
    } else {
        ElMessage({
            message: '请选择账号',
            type: 'warning',
        })
    }
}


function deepEqual(obj1, obj2) {
    if (obj1 === obj2) return true // 引用相同
    if (obj1 == null || obj2 == null || typeof obj1 !== 'object' || typeof obj2 !== 'object') {
        return false // 处理 null 和非对象
    }

    const keys1 = Object.keys(obj1)
    const keys2 = Object.keys(obj2)

    if (keys1.length !== keys2.length) return false // 键长度不同

    for (const key of keys1) {
        if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
            return false // 属性不相同
        }
    }

    return true
}

const getnum = (percent, settings) => {
    let num = 0
    if (shortcutstate.formData.sport == 'soccer') {
        num = settings.soccer_settings?.R.max || 0
    } else {
        num = settings.basketball_settings?.R.max || 0
    }
    return num

}

const getusersdata = () => {
    const arr = []
    if (shortcutstate.formData.bc_type && shortcutstate.users[shortcutstate.formData.bc_type] != null) {
        shortcutstate.users[shortcutstate.formData.bc_type].forEach(item => {
            if (searchkey.value == '') {
                let label = item.user_name
                let a = {
                    ...item,
                    label: label,
                    value: item.user_value.id,
                }
                arr.push(a)
            } else {
                let label = item.user_name
                if (label.includes(searchkey.value)) {
                    let a = {
                        ...item,
                        label: label,
                        value: item.user_value.id,
                    }
                    arr.push(a)
                }

            }
        })
    }

    users.value = arr
}
function isEmptyObject(obj) {
    return Object.keys(obj).length === 0 && obj.constructor === Object;
}

onMounted(() => {
    searchkey.value = ''
    getusersdata()
})

</script>

<style lang="scss" scoped>
.user_dialog_shortcut {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3000;
    height: 100%;
    overflow: auto;
}

.dialog_shortcut {
    position: absolute;
    width: 100%;
    background: #f5f5f5;
    bottom: 0;
    // height: 80%;
    height: calc(100vh - 262px);
    z-index: 3001;
    border-radius: 8px 8px 0 0;
}


.userdialog_header {
    width: 100%;
    height: 40px;
    margin: 0 0 10px;
    padding: 18px 16px;
    border-radius: 8px;
    background-color: #ebebeb;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .ud_header_time {
        font-size: 18px;
        font-weight: 600;
        color: #252a30;
    }
}

.userdialog_content {
    display: flex;
    flex-direction: column;
    padding: 0 16px 0 16px;

    .ud_content_search {
        height: 32px;
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

.account_amout {
    display: flex;
    flex-direction: column;

    .title {
        color: #666;
        font-size: 13px;
        margin-bottom: 8px;
        font-weight: bold;
    }

    .content {
        display: flex;
        flex-direction: column;
        border: 1px solid #ebebeb;
        // padding: 4px 0;

        .item {
            display: flex;
            padding: 4px 0;

            .name {
                width: 120px;
                color: #333333;
                font-size: 12px;
                padding: 0 4px;
            }

            .num {
                flex: 1;
                font-size: 12px;
                padding: 0 4px;
            }
        }
    }
}

.empty {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 12px;
    padding: 8px 0;
}
</style>

<style>
.ud_content_checkall .el-checkbox__inner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.ud_content_checkall .is-checked .el-checkbox__inner::after {
  transform: translate(-50%, -50%) scale(1);
}

.ud_content_checkall .el-checkbox__inner::after {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #fff;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.ud_content_table thead tr th {
  background: #fff !important;
  border-bottom: none !important;
}

.ud_content_table tbody tr td {
  border-bottom: none !important;
}

.ud_content_table .el-table .cell {
  padding: 0 6px;
}

.ud_content_checkall .el-radio {
  width: 20px;
  display: flex;
  justify-content: end;
}

.ud_content_checkall .el-radio .el-radio__label {
  padding: 0;
}

.popover_aumot {
  z-index: 3000 !important;
}
</style>